import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import {
  Breadcrumb,
  Col,
  Row,
  Form,
  Modal,
  Button,
  InputGroup,
  Jumbotron,
  FormControl,
  Container
} from 'react-bootstrap';
import $ from 'jquery';
import classNames from 'classnames';

import './less/setting.css';

import {
  function_set_teamname
} from '../../actions/member';
import { function_set_deploy_url } from '../../actions/deploy';
import { URL } from '../../config';
import InstallClient from '../../components/team/install';
import InstallNotice from '../../components/team/installNotice';

class App extends Component {

  state = {
    show: false,
    showItem: null,
    teanNameErr: false,
    isAjax: false,
    urlErr: false,
    portErr: false
  }

  setShow (item) {
    this.setState({
      show: true,
      showItem: item
    });
  }

  setHide () {
    this.setState({
      show: false,
      showItem: null
    });
  }

  setTeanName () {
    let teamname = $(this.refs.teamname).val();
    if (teamname === "") {
      this.setState({ teanNameErr: true });
      return;
    } else {
      this.setState({ teanNameErr: false, isAjax: true });
      if (!this.state.isAjax) {
        function_set_teamname(teamname, this.props.dispatch, () => {
          this.setState({
            show: false,
            showItem: null,
            isAjax: false
          });
        });
      }
    }
  }

  setClientUrl () {
    let url = $(this.refs.url).val();
    let port = $(this.refs.port).val();
    this.setState({ urlErr: false, portErr: false, isAjax: true });
    function_set_deploy_url(url, port, this.props.dispatch, () => {
      this.setState({
        show: false,
        showItem: null,
        isAjax: false
      });
    });
  }

  render () {
    return (
      <Container>
        <Breadcrumb>
          <Breadcrumb.Item href={URL.main_page}>Home</Breadcrumb.Item>
          <Breadcrumb.Item active>团队设置</Breadcrumb.Item>
        </Breadcrumb>
        <div className={classNames("setting-box", "team-setting")}>
          <Row>
            <Col className="field">团队名称</Col>
            <Col className="content">{this.props.teamname}</Col>
            {this.props.account.roleList.indexOf(1) >= 0 ?
              <Col className="operate" onClick={this.setShow.bind(this, "team")}>修改</Col>
              : null}
          </Row>
          <Row>
            <Col className="field">管理员</Col>
            <Col className="content">{this.props.account.nickname}</Col>
            {this.props.account.roleList.indexOf(1) >= 0 ?
              <Col className="operate">更换</Col>
              : null}
          </Row>
          <Row>
            <Col className="field">客户端</Col>
            <Col className="content">
              {this.props.deploy.deployUrl == null ? "尚未设置" + (this.props.account.roleList.indexOf(1) === -1 ? "，请联系管理员进行设置" : "") : this.props.deploy.deployUrl}
            </Col>
            {this.props.account.roleList.indexOf(1) >= 0 ?
              <Col className="operate" onClick={() => {
                if (this.props.deploy.deployUrl != null) {
                  this.setShow("client");
                }
              }}>
                {this.props.deploy.deployUrl == null ? <Link to={URL.download_page}>设置</Link> : "修改"}
              </Col>
              : null}
          </Row>
        </div>
        <Jumbotron>
          <h4>如何迁移服务器？</h4>
          <p>将原服务器上的 <strong className="text-primary">/usr/local/onlinetool</strong> 文件夹打包迁移到另一台服务器对应文件下（最好删除/usr/local/onlinetool/reponsitory/下的内容，在新服务器上重新clone各个微服务的代码），按下面的方式在新服务器上安装客户端工具，安装完成后修改上面的客户端地址</p>
          <InstallClient />
          <InstallNotice />
        </Jumbotron>
        <Modal className="teamName" show={this.state.show && this.state.showItem === "team"} onHide={this.setHide.bind(this)}>
          <Modal.Header>
            <Modal.Title>修改团队名称</Modal.Title>
          </Modal.Header>
          <Modal.Body>
            <Form>
              <Form.Group>
                <Form.Control className={this.state.teanNameErr ? "error" : null} ref="teamname" defaultValue={this.props.teamname} />
                {this.state.teanNameErr ?
                  <Form.Text className="text-muted">
                    团队名称不能为空
                </Form.Text>
                  : null}
              </Form.Group>
            </Form>
          </Modal.Body>
          <Modal.Footer>
            <Button variant="secondary" onClick={this.setHide.bind(this)}>
              取消
            </Button>
            <Button variant="primary" onClick={this.setTeanName.bind(this)}>
              确定
            </Button>
          </Modal.Footer>
        </Modal>
        <Modal className="clientUrl" show={this.state.show && this.state.showItem === "client"} onHide={this.setHide.bind(this)}>
          <Modal.Header>
            <Modal.Title>迁移客户端服务器</Modal.Title>
          </Modal.Header>
          <Modal.Body>
            <Form>
              <InputGroup className="mb-3">
                <FormControl className={this.state.urlErr ? "error" : null} ref="url" placeholder="不需要写http" defaultValue={this.props.deploy.deployHost} />
                <FormControl type="number" className={this.state.portErr ? "error" : null} ref="port" defaultValue={this.props.deploy.deployPort} />
              </InputGroup>
              {this.state.urlErr || this.state.portErr ?
                <Form.Text className="text-muted">
                  客户端服务器地址不合规范
                </Form.Text>
                : null}
            </Form>
          </Modal.Body>
          <Modal.Footer>
            <Button variant="secondary" onClick={this.setHide.bind(this)}>
              取消
            </Button>
            <Button variant="primary" onClick={this.setClientUrl.bind(this)}>
              确定
            </Button>
          </Modal.Footer>
        </Modal>
      </Container>
    )
  }
}

function mapStateToProps (state) {
  return {
    account: state.account,
    teamname: state.organize.name,
    deploy: state.deploy
  }
}

export default connect(mapStateToProps)(App);